<template>
  <div class="tb">
    <div class="tbs">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="`未读消息(${this.noReads.length})条`" name="first">
          <el-table :show-header="false" :data="noReads" style="width: 100%">
            <el-table-column prop="title"> </el-table-column>
            <el-table-column prop="time" width="180"> </el-table-column>
            <el-table-column width="150">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="noRead(scope.$index, scope.row)"
                  >标记为已读</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="`已读消息(${this.reads.length})条`" name="second"
          ><el-table :show-header="false" :data="reads">
            <el-table-column prop="title"> </el-table-column>
            <el-table-column prop="time" width="180"> </el-table-column>
            <el-table-column width="150">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="small"
                  @click="read(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="height: 70px; line-height: 90px">
            <el-button type="danger" size="small" @click="allDel"
              >全部删除</el-button
            >
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`回收站(${this.backReads.length})条`" name="third"
          ><el-table :show-header="false" :data="backReads">
            <el-table-column prop="title"> </el-table-column>
            <el-table-column prop="time" width="180"> </el-table-column>
            <el-table-column width="150">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="backRead(scope.$index, scope.row)"
                  >还原</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="height: 70px; line-height: 90px">
            <el-button type="danger" size="small" @click="delAll"
              >清空回收站</el-button
            >
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      noReads: [
        { title: "今天公司请假了", time: "2020-10-30 9:02", type: 1 },
        { title: "2020年公司上市", time: "2020-10-30 9:03", type: 1 },
        { title: "修改了10个bug", time: "2020-10-30 9:05", type: 1 },
        { title: "今天停电了，哈哈哈哈哈哈", time: "2020-10-30 9:06", type: 1 },
        { title: "啦啦啦,测试数据", time: "2020-10-30 10:10", type: 1 },
      ],
      reads: [{ title: "啦啦啦,测试数据", time: "2020-10-30 10:10", type: 2 }],
      backReads: [
        {
          title: "为什么table数据三级不能使用一个数组......",
          time: "2020-10-30 10:10",
          type: 2,
        },
      ],
      obj: null,
      all: [],
    };
  },
  methods: {
    noRead(index) {
      // 删除的两种方法
      this.obj = this.noReads.splice(index, 1); //  1
      this.reads.unshift(JSON.parse(JSON.stringify(...this.obj))); // 注意 splice返回值 不能直接取出需要转换下
    },
    read(index, row) {
      this.reads.splice(index, 1); //   2
      this.backReads.unshift(row);
    },
    backRead(index, row) {
      this.backReads.splice(index, 1);
      this.reads.unshift(row);
    },
    delAll() {
      this.backReads = [];
    },
    allDel() {
      this.all = JSON.parse(JSON.stringify(this.reads));
      console.log(this.all);
      this.reads = [];
      this.backReads = [...this.backReads, ...this.all];
    },
  },
};
</script>

<style scoped>
.tb{
   padding: 10px;
  box-sizing: border-box;
  /* border: 1px solid red; */
}
.tbs {
  padding: 20px 30px;
  box-sizing: border-box;
  border: 1px solid gray;
  border-radius: 5px;
  background: #fff;
}
</style>